<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NumWorks graphing calculator</title>
<style>
body {
  background: #C2C2C2;
  margin: 0;
  padding: 0;
  text-align: center;
}

.col-fullscreen {
  display: none;
  width: 60%;
  float: left;
}

.col-fullscreen canvas {
  margin-top: 7%;
  width: 100%;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

body.fullscreen .col-fullscreen {
  display: block;
}

body.fullscreen .col-calculator {
  width: 35%;
  float: left;
}

a.action {
  display: block;
  width: 3%;
  padding: 1% 2%;
  border: 1px solid black;
  border-radius: 100px;
  cursor: pointer;
  opacity: 0.65;
}

a.action:hover {
  opacity: 1.0;
  background-color: rgba(0,0,0,0.125);
}

a.action svg {
  display: block;
}

.actions {
  position: absolute;
  bottom: 2%;
  text-align: left;
  left: 0;
  right: 0;
  margin-left: 20px; /* Center the buttons - compensate the 10px margin below */
}

.actions a {
  display: inline-block;
  margin-right: 10px;
}

.calculator {
  margin: 0 auto;
  position: relative;
  display: inline-block;
  text-align: left; }
  .calculator > img {
    /* Rely on the img content to set the dimensions */
    max-height: 100vh;
    max-width: 100%;
    display: block; }
  .calculator .screen {
    position: absolute;
    top: 8.5%;
    left: 16.25%;
    width: 67.5%;
    height: 26.3%;
    border: 0 none; }
  .calculator .keyboard {
    position: absolute;
    top: 38.5%;
    left: 10%;
    width: 81%;
    bottom: 5%; }
    .calculator .keyboard span {
      cursor: pointer;
      border-radius: 40%;
      display: block;
      float: left; }
    .calculator .keyboard span:hover {
      background-color: rgba(0, 0, 0, 0.1); }
    .calculator .keyboard span:active {
      background-color: rgba(0, 0, 0, 0.2); }
    .calculator .keyboard .nav {
      position: absolute;
      top: 0;
      height: 27%;
      width: 100%; }
      .calculator .keyboard .nav span {
        position: absolute; }
      .calculator .keyboard .nav .left {
        top: 36%;
        left: 3%;
        width: 15%;
        height: 28%; }
      .calculator .keyboard .nav .right {
        top: 36%;
        left: 17%;
        width: 15%;
        height: 28%; }
      .calculator .keyboard .nav .top {
        top: 7%;
        left: 12.5%;
        width: 10%;
        height: 40%; }
      .calculator .keyboard .nav .bottom {
        top: 53%;
        left: 12.5%;
        width: 10%;
        height: 40%; }
      .calculator .keyboard .nav .home {
        top: 12%;
        left: 42%;
        width: 16%;
        height: 33%; }
      .calculator .keyboard .nav .power {
        top: 54%;
        left: 42%;
        width: 16%;
        height: 33%; }
      .calculator .keyboard .nav .ok {
        top: 30%;
        left: 68%;
        width: 13%;
        height: 38%; }
      .calculator .keyboard .nav .back {
        top: 30%;
        left: 84%;
        width: 13%;
        height: 38%; }
    .calculator .keyboard .functions {
      position: absolute;
      top: 26.75%;
      left: 1%;
      width: 98%; }
      .calculator .keyboard .functions span {
        margin: 1.7% 1%;
        width: 14.65%;
        height: 0;
        padding-top: 10%; }
    .calculator .keyboard .digits {
      position: absolute;
      top: 57%;
      left: 0.5%;
      width: 98%; }
      .calculator .keyboard .digits span {
        margin: 1.8% 2%;
        width: 16%;
        height: 0;
        padding-top: 11%; }
</style>
  </head>
  <body>
    <div class="row">
      <div class="col-calculator">
        <div class="calculator">
          <img src="background.jpg" alt="NumWorks Calculator">
          <canvas id="screen" class="screen" oncontextmenu="event.preventDefault()"></canvas>
          <div class="keyboard">
            <div class="nav">
              <span class="left" data-key="0"></span>
              <span class="top" data-key="1"></span>
              <span class="bottom" data-key="2"></span>
              <span class="right" data-key="3"></span>
              <span class="ok" data-key="4"></span>
              <span class="back" data-key="5"></span>
              <span class="home" data-key="6"></span>
              <span class="power" data-key="7"></span>
            </div>
            <div class="functions">
              <span data-key="12"></span>
              <span data-key="13"></span>
              <span data-key="14"></span>
              <span data-key="15"></span>
              <span data-key="16"></span>
              <span data-key="17"></span>
              <span data-key="18"></span>
              <span data-key="19"></span>
              <span data-key="20"></span>
              <span data-key="21"></span>
              <span data-key="22"></span>
              <span data-key="23"></span>
              <span data-key="24"></span>
              <span data-key="25"></span>
              <span data-key="26"></span>
              <span data-key="27"></span>
              <span data-key="28"></span>
              <span data-key="29"></span>
            </div>
            <div class="digits">
              <span data-key="30"></span>
              <span data-key="31"></span>
              <span data-key="32"></span>
              <span data-key="33"></span>
              <span data-key="34"></span>
              <span data-key="36"></span>
              <span data-key="37"></span>
              <span data-key="38"></span>
              <span data-key="39"></span>
              <span data-key="40"></span>
              <span data-key="42"></span>
              <span data-key="43"></span>
              <span data-key="44"></span>
              <span data-key="45"></span>
              <span data-key="46"></span>
              <span data-key="48"></span>
              <span data-key="49"></span>
              <span data-key="50"></span>
              <span data-key="51"></span>
              <span data-key="52"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-fullscreen">
        <canvas class="screen-magnified" width="320" height="240"></canvas>
      </div>
      <div class="actions">
        <a id="action-fullscreen" class="action">
          <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#434343"><path d="M5.075,6.95 L6.918,5.088 L3.938,2.062 L5.955,0.018 L0.052,0.018 L0.052,6.004 L2.098,3.928 L5.075,6.95 Z" class="si-glyph-fill"></path><path d="M16.0034788,9.916 L13.832,12.013 L10.799,8.96 L8.918,10.841 L11.957,13.897 L9.961,15.9813842 L16.0034788,15.9813842 L16.0034788,9.916 Z"></path></g></g></svg>
        </a>
        <a id="action-screenshot" class="action">
          <svg viewBox="0 1.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>871</title><defs></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(0.995000, 2.980000)" fill="#434343"><circle cx="7.958" cy="6.958" r="2.958" class="si-glyph-fill"></circle><path d="M14.666,2.042 L10.953,2.042 L9.937,0.031 L6,0.031 L5,2.042 L1.333,2.042 C0.597,2.042 0,2.639 0,3.375 L0,10.625 C0,11.361 0.597,11.959 1.333,11.959 L14.666,11.959 C15.402,11.959 16,11.361 16,10.625 L16,3.375 C16,2.639 15.402,2.042 14.666,2.042 L14.666,2.042 Z M6.953,0.969 L9.047,0.969 L9.047,2.031 L6.953,2.031 L6.953,0.969 L6.953,0.969 Z M8.002,11.033 C5.764,11.033 3.947,9.221 3.947,6.985 C3.947,4.749 5.763,2.937 8.002,2.937 C10.242,2.937 12.057,4.749 12.057,6.985 C12.057,9.221 10.242,11.033 8.002,11.033 L8.002,11.033 Z M14,4.031 L11.953,4.031 L11.953,2.969 L14,2.969 L14,4.031 L14,4.031 Z" class="si-glyph-fill"></path></g></g></svg>
        </a>
      </div>

    </div>
    <script src="epsilon.js"></script>
    <script>
var mainCanvas = document.querySelector(".calculator .screen");
var secondaryCanvasContext = document.querySelector(".screen-magnified").getContext("2d");
var Module = {
  arguments: ["--language", window.navigator.language.split('-')[0]],
  canvas: mainCanvas,
  onDisplayRefresh: function() {
    secondaryCanvasContext.drawImage(mainCanvas, 0, 0);
  }
};

Epsilon(Module);
    </script>
    <script>
function screenshot() {
  var canvas = document.querySelector('.screen');
  var link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
  link.click();
}

var spans = document.querySelectorAll(".calculator .keyboard span");
for (var i=0; i< spans.length; i++) {
  var span = spans[i];
  span.addEventListener("mousedown", function(e) {
    Module._IonSimulatorKeyboardKeyDown(this.getAttribute("data-key"));
  });
  span.addEventListener("mouseup", function(e) {
    Module._IonSimulatorKeyboardKeyUp(this.getAttribute("data-key"));
  });
}

document.getElementById("action-fullscreen").addEventListener("click", function(e){
  if (document.body.className == "fullscreen") {
    document.body.className = "";
  } else {
    document.body.className = "fullscreen";
  }
});

document.getElementById("action-screenshot").addEventListener("click", function(e) {
  screenshot();
});

window.addEventListener("keydown", function(e) {
  // space and arrow keys
  if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
    e.preventDefault();
  }
}, false);
    </script>
    <script async src="https://www.numworks.com/simulator/update.js"></script>
  </body>
</html>
